{% extends 'index.html' %}
{% block content %}
    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>京乳时鲜 &emsp;&emsp;&emsp;车辆管理系统&emsp;&emsp;</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="{% url 'index' %}">主页</a></li>
                                <li class="active">车辆调度管理</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4>调度管理</h4>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-pills mb-3" id="schedule-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-total-tab" data-toggle="pill" href="#pills-total" role="tab" aria-controls="pills-total" aria-selected="true">调度审核</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-seg-tab" data-toggle="pill" href="#pills-seg" role="tab" aria-controls="pills-seg" aria-selected="false">执行中调度查看</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-seg2-tab" data-toggle="pill" href="#pills-seg2" role="tab" aria-controls="pills-seg" aria-selected="false">已完成调度查看</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="schedule-tabContent">
                                <div class="tab-pane fade show active" id="pills-total" role="tabpanel" aria-labelledby="pills-total-tab">
                                    <table id="bootstrap-data-table" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>调度ID</th>
                                                <th>任务ID</th>
                                                <th>车辆ID</th>
                                                <th>调度路线</th>
                                                <th>调度审核</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- /.todo-list -->
                                            {% for item in schedule_info_1 %}
                                                <tr>
                                                    <td>{{item.schedule_id}}</td>
                                                    <td>{{item.task_id}}</td>
                                                    <td>{{item.truck_id}}</td>
                                                    <td>{{item.schedule_route}}</td>
                                                    <td>
                                                        <button name="{{ item.schedule_id }}" type="pass" class="btn btn-primary">
                                                            <i class="fa fa-check-square fa-lg"></i>&nbsp;
                                                            <span>通过</span>
                                                        </button>
                                                        <button name="{{ item.schedule_id }}" type="fail" class="btn btn-danger">
                                                            <i class="fa fa-times-circle fa-lg"></i>&nbsp;
                                                            <span>不通过</span>
                                                        </button>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>

                                    </table>
                                </div>
                            <div class="tab-pane fade" id="pills-seg" role="tabpanel" aria-labelledby="pills-seg-tab">
                                <div>
                                    <table id="bootstrap-data-table2" class="table table-striped table-bordered" style="white-space: nowrap">
                                        <thead>
                                            <tr>
                                                <th>调度ID</th>
                                                <th>任务ID</th>
                                                <th>车辆ID</th>
                                                <th>调度路线</th>
                                                <th>当前车辆状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        {% for item in schedule_info_2%}
                                            <tr>
                                                <td>{{item.schedule_id}}</td>
                                                <td>{{item.task_id}}</td>
                                                <td>{{item.truck_id}}</td>
                                                <td>{{item.schedule_route}}</td>
                                                <td><a href="{% url 'truck_status' item.truck_id %}" class="btn btn-success" style="height:50%">查看车辆状态</a></td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-seg2" role="tabpanel" aria-labelledby="pills-seg2-tab">
                                <div>
                                    <table id="bootstrap-data-table3" class="table table-striped table-bordered" style="white-space: nowrap">
                                        <thead>
                                            <tr>
                                                <th>调度ID</th>
                                                <th>任务ID</th>
                                                <th>车辆ID</th>
                                                <th>调度路线</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        {% for item in schedule_info_3 %}
                                            <tr>
                                                <td>{{item.schedule_id}}</td>
                                                <td>{{item.task_id}}</td>
                                                <td>{{item.truck_id}}</td>
                                                <td>{{item.schedule_route}}</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block css_js_2 %}


    <link rel="stylesheet" href="/static/assets/css/lib/datatable/dataTables.bootstrap4.min.css">
{#    <script src="/static/assets/js/lib/data-table/jquery.dataTables1.10.18.min.js"></script>#}
    <script src="/static/assets/js/popper.min.js"></script>
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <script src="/static/assets/js/jquery.matchHeight.min.js"></script>
    <script src="/static/assets/js/main.js"></script>


    <script src="/static/assets/js/lib/data-table/datatables1.10.18.min.js"></script>
    <script src="/static/assets/js/lib/data-table/dataTables.bootstrap4.min.js"></script>

    <script>
        jQuery(document).ready(function($) {
            $("#trucks").addClass("active");
            $("#schedule_manage").addClass("active");
            $("#trucks_toggle").trigger("click");
            var table = $('#bootstrap-data-table').DataTable( {
                aLengthMenu: [
                    [10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]
                ],
                language:{
                    "info": "显示_START_至_END_项结果，共_TOTAL_项",
                    "search": "搜索:",
                    "paginate": {"previous": "上一页", "next": "下一页"},
                    "lengthMenu": "显示 _MENU_ 项",
                    "zeroRecords": "抱歉，没有找到符合条件的记录",
                    "infoFiltered": "(筛选自 _MAX_ 条总记录)",
                    "infoEmpty":"显示 0 至 0 项结果，共 0 项",
                },
            } );
            $("button").click(function () {
                var this_row = this;
                $.ajax({
                    url: "",
                    type: "GET",
                    data: {"type":$(this_row).attr("type"), "id":this_row.name},
                    success: function (data) {
                        if (data.result==="success"){
                            $(this_row).parent().parent().addClass("sel");
                            table.rows(".sel").remove().draw(false);
                        }
                    }
                });
            });
            $('#bootstrap-data-table2').DataTable( {
                aLengthMenu: [
                    [10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]
                ],
                language:{
                    "info": "显示_START_至_END_项结果，共_TOTAL_项",
                    "search": "搜索:",
                    "paginate": {"previous": "上一页", "next": "下一页"},
                    "lengthMenu": "显示 _MENU_ 项",
                    "zeroRecords": "抱歉，没有找到符合条件的记录",
                    "infoFiltered": "(筛选自 _MAX_ 条总记录)",
                    "infoEmpty":"显示 0 至 0 项结果，共 0 项",
                },
            } );
            $('#bootstrap-data-table3').DataTable( {
                aLengthMenu: [
                    [10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]
                ],
                language:{
                    "info": "显示_START_至_END_项结果，共_TOTAL_项",
                    "search": "搜索:",
                    "paginate": {"previous": "上一页", "next": "下一页"},
                    "lengthMenu": "显示 _MENU_ 项",
                    "zeroRecords": "抱歉，没有找到符合条件的记录",
                    "infoFiltered": "(筛选自 _MAX_ 条总记录)",
                    "infoEmpty":"显示 0 至 0 项结果，共 0 项",
                },
            } );
        } );
    </script>
{% endblock %}